<template>
  <div class="n-center" :style="{width: initWidth,height: initHeight,lineHeight: initHeight, fontSize: initFontSize}">
    <span :class="resultClass">{{ result }}</span>
  </div>
</template>
<script>
  import { sign } from '@/api/common'
  export default {
    data () {
      return {
        result: '',
        resultClass: 'n-success'
      }
    },
    mounted () {
      this.$parent.$parent.$children[0].$el.innerHTML = ''
      this.toSign(false)
    },
    computed: {
      initFontSize () {
        return this.clientWidth * 24 / 750 + 'px'
      },
      initWidth () {
        return this.clientWidth + 'px'
      },
      initHeight () {
        return this.clientHeight + 'px'
      }
    },
    methods: {
      toSign () {
        sign({id: parseInt(window.location.hash.substring(window.location.hash.indexOf('?id=') + 4))}).then(response => {
          if (response.data === 'SUCCESS') {
            this.result = '签到成功'
            this.resultClass = 'n-success'
          } else if (response.data === 'NO_APPLAY') {
            this.result = '您还未报名'
            this.resultClass = 'n-fail'
          } else {
            this.result = '签到失败'
            this.resultClass = 'n-fail'
          }
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .n-center {
    text-align: center;
  }
  .n-success {
    color: #00b685;
  }
  .n-fail {
    color: red;
  }
</style>
